<template>
  <div class="mango-empty">
    <div class="mango-empty__image">
      <img
        :src="props.image"
        :style="{width:widthDom}"
      />
    </div>
    <p class="mango-empty__desc">{{ props.desc || "" }}</p>
    <slot />
  </div>
</template>
<script setup>
const props = defineProps({
  image: {
    type: String,
    default:()=>
      ""
    
  },
  desc: String,
  widthDom:{
    type: String,
    default:()=>"65%"
  }
});
</script>
<style lang="scss">
.mango-design-img{
  position: absolute;
  left: calc(50% - 70px);
  top: calc(30% - 55px);
}
.mango-empty {
  margin: 0 8px;
  font-size: 14px;
  line-height: 5px;
  text-align: center;
  .mango-empty__image {
    height: 100%;
  }

  .mango-empty__image img {
    height: 100%;
    // vertical-align: middle;
    // border-style: none;
  }
  .mango-empty__image svg {
   height: 100%;
    margin: auto;
  }

  .mango-empty__desc {
    font-size: 12px;
    color: #99A7BE;
  }}
</style>
